<template>
  <div class="My">
    <div class="My_imges">
      <img src="https://api-haoke-web.itheima.net/img/profile/bg.png" alt="" />
    </div>
    <div class="conter">
      <div class="images">
        <img
          src="https://api-haoke-web.itheima.net/img/profile/avatar.png"
          alt=""
        />
      </div>
      <div class="deng_button">
        <span>游客</span>
        <van-button round type="primary" @click="butr">去登录</van-button>
       
      </div>
    </div>
    <div class="daohan">
      <van-grid>
        <van-grid-item
          icon="wap-home-o"
          text="我的出租"
          to="/"
          style="flex-basis: 30%;"
        />
        <van-grid-item
          icon="clock-o"
          text="看房记录"
          to="/"
          style="flex-basis: 30%;"
        />
        <van-grid-item
          icon="idcard"
          text="成为房主"
          to="/"
          style="flex-basis: 30%;"
        />
        <van-grid-item
          icon="contact"
          text="个人资料"
          to="/"
          style="flex-basis: 30%;"
        />
        <van-grid-item
          icon="service-o"
          text="联系我们"
          to="/"
          style="flex-basis: 30%;"
        />
        <van-grid-item style="flex-basis: 30%;" />
      </van-grid>
    </div>
    <div class="rout">
      <img
        src="https://api-haoke-web.itheima.net/img/profile/join.png"
        alt=""
      />
    </div>
  </div>
</template>

<script>
import axios from "axios"
import { Dialog } from 'vant';
export default {
 data() {
    return {
      logine: [],
    };
  },
  created() {
    axios.get("http://47.102.145.189:8009/user").then((res) => {
      console.log("res...", res);
    });
  },
  methods: {
    butr() {
     this.$router.push("/Login")
    },
  }
}
</script>

<style scoped lang="scss">
.Mye {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.My_imges {
  width: 100%;
  height: 183.9px;
  img {
    width: 100%;
    height: 100%;
  }
}
.conter {
  width: 85%;
  height: 150px;
  margin: 0 auto;
  background: #f2f6fc;
  position: relative;
  top: -60px;
  left: 43%;
  transform: translate(-50%, 0%);
}
.images {
  width: 70px;
  position: relative;
  top: 0px;
  left: 50%;
  transform: translate(-50%, -50%);
  img {
    width: 70px;
  }
}
.deng_button {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  .van-button {
    width: 70px;
    height: 30px;
    margin: 10px auto;
    padding: 10px;
    font-size: 10px;
  }

}
.daohan {
  width: 100%;
  display: flex;
}
.van-grid {
  width: 100%;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  margin: 0 auto;
  background: #fff;
  .van-grid-item {
    border: none;
  }
}
.rout {
  width: 90%;
  height: 100px;
  margin: 0 auto;
  background: #fff;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>